<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
	</head>
	<body>
		<input class="file" type="file" />
		
		<div id="outpos"/>
		<div id="output">HTML input输入框 file类型 上传文件~~~</div>
		
		<script type="text/javascript">
			var server = 'http://124.71.79.125:8081/zhjc/focCommonController.do?focupload&uploadPath=infomation&token=8a8a6c0e6012b78401609be861cf44bf@*@wnNoJfQ11Df8m07a6SBw';
			var fileDom = document.querySelector(".file");
			
			function createUpload(file, url, key, header, data) {
				if (!url) return;
				
				if (!key) key = 'file';
				if (!header) header = {};
				if (!data) data = {};
				
				var formData = new FormData();
				for (var keys in data) {formData.append(keys, data[keys]);}
				formData.append(key, file);
				
				var xhr = new XMLHttpRequest();
				xhr.open('POST', url, true);
				
				for (var keys in header) {
					xhr.setRequestHeader(keys, header[keys]);
				}
				
				xhr.ontimeout = function() {
					console.log('请求超时');
					outSet('请求超时');
				};
				
				xhr.onreadystatechange = function(ev) {
					if(xhr.readyState == 4) {
						console.log('status：'+xhr.status);
						
						if (xhr.status == 200) {
							console.log('服务端返回数据：' + xhr.responseText);
							outSet('服务端返回数据：' + xhr.responseText);
						} else {
							if (xhr.status == 0) {
								console.log('请检查请求头Content-Type与服务端是否匹配，并确认服务端已正确开启跨域');
								outSet('请检查请求头Content-Type与服务端是否匹配，并确认服务端已正确开启跨域');
							}
						}
					}
				};
				
				xhr.send(formData);
			}
			
			window.onload = function() {
				fileDom.value = '';
				fileDom.addEventListener('change', (event) => {
					var file = fileDom.files[0];
					
					createUpload(file, server, '', {}, {
						upload: file
					});
				}, false);
			};
		</script>
	</body>
</html>